<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #paginataion{
            width: 700px;
            /* 弹性盒子 */
            display: flex;
            justify-content: center;
        }
        #paginataion li{
            list-style: none;
            background: #666;
            padding: 2px 8px;
            color: white;
            margin: 0 3px;
        }
        button{
            margin: 4px;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 当页面加载后执行
        $(function(){
            loadUsers()
        })

        // 加载用户信息
        function loadUsers(page=1){ // 参数page默认值为1
            $.ajax({
                url: 'http://ums.tangxiaoyang.vip/api/user/findByPage',
                data: {
                    page: page,
                    rows: 5,
                    name: $('#name').val(),
                    phone: $('#phone').val(),
                    status: $('#status').val()
                },
                dataType: 'json',
                success: function(res){
                    console.log(res)
                    if(res.status === 200){
                        // 清空数据
                        $('#tb').empty()
                        $('#paginataion').empty()

                        // 获取用户数据
                        let users = res.data.records
                        for(let i in users){
                            let user = users[i]
                            let tr = $('<tr>')
                                .append($('<td>').text(Number(i)+1))
                                .append($('<td>').text(user.name))
                                .append($('<td>').text(user.phone))
                                .append($('<td>').text(user.address))
                                .append($('<td>').text(user.status==0?'启用':'禁用'))
                                .append($('<td>')
                                    .append($('<button>').text('修改').click(function(){
                                        localStorage.setItem('userId', user.id) // 将用户id存储到localStorage中
                                        location.href = 'modify.html'
                                    }))
                                    .append($('<button>').text('删除'))
                                    .append($('<button>').text(user.status==0?'禁用':'启用'))
                                )
                            $('#tb').append(tr)
                        }

                        // 获取分页信息
                        let pages = res.data.pages // 总页数  
                        let current = res.data.current
                        $('#paginataion').append($('<li>').text('上一页').click(function(){
                            loadUsers(current==1 ? 1 : current-1)
                        }))
                        for(let i=1;i<=pages;i++){
                            $('#paginataion').append($('<li>').text(i).css('background', i==current ? '#ff7300' : '#666').click(function(){
                                loadUsers(i)
                            }))
                        }
                        $('#paginataion').append($('<li>').text('下一页').click(function(){
                            loadUsers(current==pages ? pages : current+1)
                        }))
                    }
                }
            })
        }

        /**
         * 跳转到add.html
         */ 
        function toAdd(){
            location.href = 'add.html'
        }
    </script>
</head>
<body>
    <h2>用户管理系统</h2>
    姓名：<input type="text" id="name" placeholder="请输入姓名"> &nbsp;&nbsp;
    电话：<input type="text" id="phone" placeholder="请输入电话"> &nbsp;&nbsp;
    状态：<select id="status">
        <option value="">全部</option>
        <option value="0">启用</option>
        <option value="1">禁用</option>
    </select> &nbsp; &nbsp;
    <button onclick="loadUsers()">查询</button>
    <button onclick="toAdd()">添加用户</button>
    <br> <br>

    <!-- table>(thead>tr>th*6)+tbody>tr>td*6 -->
    <table border="1px" width="700px" cellspacing="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody align="center" id="tb">
            
        </tbody>
    </table>

    <ul id="paginataion">
        
    </ul>
</body>
</html>